import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { colors, spacing } from '../styles/variables';
import { Flex } from '../styles/components';
import ThemeToggle from './ThemeToggle';

const HeaderContainer = styled.header`
  background: ${colors.backgroundSecondary};
  padding: ${spacing.md} 0;
  border-bottom: 1px solid ${colors.border};
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
`;

const Nav = styled.nav`
  display: flex;
  gap: ${spacing.xl};
`;

const NavLink = styled(Link)`
  color: ${colors.textSecondary};
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;

  &.active {
    color: ${colors.primary};
  }

  &:hover {
    color: ${colors.textPrimary};
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: ${colors.primary};
    transition: width 0.3s ease;
  }

  &:hover::after {
    width: 100%;
  }
`;

const UserSection = styled.div`
  display: flex;
  align-items: center;
  gap: ${spacing.md};
`;

const Avatar = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: ${colors.gradientGold};
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${colors.background};
  font-weight: bold;
  cursor: pointer;
`;

function Header({ toggleTheme, theme }) {
  return (
    <HeaderContainer>
      <Flex justify="space-between" align="center">
        <Nav>
          <NavLink to="/" className="active">首页</NavLink>
          <NavLink to="/daily-fortune">每日运势</NavLink>
          <NavLink to="/fortune-tools">占卜工具</NavLink>
          <NavLink to="/mind-station">心灵驿站</NavLink>
        </Nav>
        <UserSection>
          <ThemeToggle isDark={theme === 'dark'} toggleTheme={toggleTheme} />
          <Avatar>U</Avatar>
        </UserSection>
      </Flex>
    </HeaderContainer>
  );
}

export default Header;